<script setup lang="ts">
let alignItems = ref('stretch')
let justifyItems = ref('stretch')
let alignSelf = ref('stretch')
let justifySelf = ref('stretch')
</script>

<template>
<div class="wrap">
  <div class="form">
    <label for="align-items">align-items</label>
    <select v-model="alignItems" name="align-items" id="align-items">
      <option value="start">start</option>
      <option value="end">end</option>
      <option value="center">center</option>
      <option value="stretch" selected>stretch</option>
    </select>
    <label for="justify-items">justify-items</label>
    <select v-model="justifyItems" name="justify-items" id="justify-items">
      <option value="start">start</option>
      <option value="end">end</option>
      <option value="center">center</option>
      <option value="stretch" selected>stretch</option>
    </select>
    (改变所有网格项目在网格区域中内联轴和块轴方向的对齐方式)
  </div>
  <section>
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </section>
  <div class="form">
    <label for="align-self">align-self</label>
    <select v-model="alignSelf" name="align-self" id="align-self">
      <option value="start">start</option>
      <option value="end">end</option>
      <option value="center">center</option>
      <option value="stretch" selected>stretch</option>
    </select>
    <label for="justify-self">justify-self</label>
    <select v-model="justifySelf" name="justify-self" id="justify-self">
      <option value="start">start</option>
      <option value="end">end</option>
      <option value="center">center</option>
      <option value="stretch" selected>stretch</option>
    </select>
    (改变网格项目一在网格区域中内联轴和块轴方向的对齐方式)
  </div>

</div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrap {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", "Bungee Shade", cursive, Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  place-content: center;
  padding: 1rem;
  gap: 1rem;

  section {
    width: 80vw;
    margin: 0 auto;
    font-family: "Bungee Shade", cursive;
    font-size: 1.2rem;

    display: flex;
    box-shadow: 0 0 0 6px rgb(217 210 10 / 9%);
    border-radius: 4px;

    .container {
      --width: 100%;
      --justify-items: v-bind(justifyItems);
      --align-items: v-bind(alignItems);
      --justify-self: v-bind(justifySelf);
      --align-self: v-bind(alignSelf);
      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 120px;
      place-items: var(--align-items, stretch) var(--justify-items, stretch);


      width: var(--width);
      padding: 1rem;

      outline: 1px dashed #f36;
      counter-reset: item;

      .item {
        counter-increment: item;
        display: flex;
        justify-content: center;
        align-items: center;
        /*   min-height: 120px; */
        background-color: #2c6;
        color: #000;
        position: relative;
        &:before {
          content: counter(item);
          font-family: "Bungee Shade", cursive;
          font-size: 3.5rem;
        }

        &:nth-child(1) {
          background-color: #f196f3;
          place-self: var(--align-self, stretch) var(--justify-self, stretch);
        }

        &:nth-child(2) {
          background-color: #dac2f1;
        }

        &:nth-child(3) {
          background-color: #ccf1c2;
        }

        &:nth-child(4) {
          background-color: #c2e9f1;
        }

        &:nth-child(5) {
          background-color: #90aeef;
        }

        &:nth-child(6) {
          background-color: #f44336;
        }

        &:nth-child(7) {
          background-color: #2196f3;
        }

        &:nth-child(8) {
          background-color: #f196f3;
        }
      }

    }
  }

  .form {
    display: flex;
    align-items: center;
    gap: 5px;
  }


}
</style>
